<template>
	<view class="content" :style="`paddingTop: ${statusHeight}`">
		<view class="header">
			<u-icon class="icon" name="arrow-left" size="36rpx" color="#333333" @click="goBack"></u-icon>
			<u-search
				searchIcon="search"
				:showAction="true" 
				placeholder="智融金科" 
				height="60" 
				v-model="keyword"
				bgColor="#fff"
				searchIconColor="#999999"
				searchIconSize="36rpx"
				color="#333"
				:actionStyle="actionStyle"
			>
			</u-search>
			<view class="search-popup" v-if="popup">
				<view class="item">
					<u-icon class="icon" name="search" size="36rpx" color="#999"></u-icon>
					<view >贷款</view>
				</view>
				<view class="item">
					<u-icon class="icon" name="search" size="36rpx" color="#999"></u-icon>
					<view >贷款</view>
				</view>
				<view class="item">
					<u-icon class="icon" name="search" size="36rpx" color="#999"></u-icon>
					<view >贷款</view>
				</view>
				<view class="item">
					<u-icon class="icon" name="search" size="36rpx" color="#999"></u-icon>
					<view >贷款</view>
				</view>
				<view class="item">
					<u-icon class="icon" name="search" size="36rpx" color="#999"></u-icon>
					<view >贷款</view>
				</view>
			</view>
		</view>
		<view class="layout" v-if="hotFlag">
			<u-empty mode="car" 
			text='前不见古人，后不见来者，看看其他结果' 
			textColor="#999999"
			textSize="24rpx"
			width="352rpx"
			icon="../../static/images/bgCar03.png"></u-empty>
		</view>
		<view class="layout">
			<view class="search">
				<view class="search-title">
					<view class="">历史搜索</view>
					<u-icon class="icon" name="trash" size="36rpx" color="#666"></u-icon>
				</view>
				<view class="search-history">
					<view class="search-history-name">智融金科</view>
				</view>
			</view>
		</view>
		<view class="layout">
			<view class="hot">
				<view class="hot-title">
					<view class="hot-title-left">
						<image src="../../static/images/bgCar01.png" mode=""></image>
					</view>
					<view class="hot-title-right">
						<view class="item" @click="tabTap(index)" :class="current == index?'active': ''" v-for="(item,index) in tabList" :key="index">{{item.name}}</view>
					</view>
				</view>
				<view class="hot-list">
					<view class="hot-list-item">
						<view class="hot-list-item-index">1</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">2</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">3</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">4</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">5</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">6</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">7</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">8</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">9</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
					<view class="hot-list-item">
						<view class="hot-list-item-index">10</view>
						<view class="hot-list-item-content">
							<view class="title">
								<view class="name">兴消金</view>
								<view class="lx">参考月利息: <text>0.9%～1.1%</text></view>
							</view>
							<view class="bottom">已有1235人申请</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout" v-if="hotFlag">
			<view class="hot goods">
				<view class="hot-title">
					<view class="hot-title-left">全部产品</view>
					<view class="hot-title-right">
						<view class="item" @click="tabTap(index)" :class="current == index?'active': ''" v-for="(item,index) in tabList1" :key="index">{{item.name}}</view>
					</view>
				</view>
				<view class="goods-list">
					<creditList />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import creditList from '../../components/credit/list.vue'
	export default {
		components: {
			creditList
		},
		data () {
			return {
				statusHeight: getApp().globalData.statusBarHeight,
				keyword: '',
				search: 'search',
				actionStyle: {
					fontSize: '28rpx',
					color: '#FF6A2B'
				},
				tabList: [{
						name: '综合榜',
					}, {
						name: '额度榜',
					}, {
						name: '利息榜'
					}, {
						name: '下款榜'
				}],
				tabList1: [{
						name: '线下',
					}, {
						name: '线上',
					}],
				current: 0,
				popup: false,
				hotFlag: false
			}
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			tabTap(e){
				this.current = e
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-image:linear-gradient(to top, #f5f5f5 60%, rgba(255, 129, 75, 0.1));
}
.header{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	.icon{
		padding-right: 20rpx;
	}
	.input{
		position: relative;
	}
}
.layout{
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	&:last-child{
		padding-bottom: 30rpx;
	}
}
.search{
	background: #fff;
	border-radius: 14rpx;
	padding:20rpx;
	&-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		view{
			color: #333;
			font-family: Source Han Sans CN;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 24px; /* 150% */
		}
	}
	&-history {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		&-name{
			font-size: 24rpx;
			color: #666666;
			background: #F8F8F8;
			padding: 6rpx 18rpx;
			border-radius: 30rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
		}
	}
}
.hot{
	background: #fff;
	border-radius: 14rpx;
	padding: 30rpx;
	&-title{
		display: flex;
		justify-content: flex-start;
		// align-items: center;
		&-left{
			width: 200rpx;
			height: 50rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		&-right{
			width: 450rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 0;
			padding: 0;
			.item{
				font-size: 26rpx;
				color: #666;
				margin-left: 30rpx;
				padding-bottom: 10rpx;
				border-bottom: 5rpx solid transparent;
			}
			.active{
				border-bottom: 5rpx solid #FF814B;
				color: #333;
			}
		}
	}
	&-list{
		margin-top: 30rpx;
		&-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E4E4E4;
			&:last-child{
				border-bottom: none;
			}
			&:nth-of-type(1) &-index{
				color: #FF6A2B;
				font-family: Source Han Sans CN;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700;
			}
			&:nth-of-type(1) &-content .title .lx text{
				color: #FF6A2B;
			}
			
			&:nth-of-type(2) &-index{
				color: #FF853A;
				font-family: Source Han Sans CN;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700;
			}
			&:nth-of-type(2) &-content .title .lx text{
				color: #FF853A;
			}
			&:nth-of-type(3) &-index{
				color: #FFBA68;
				font-family: Source Han Sans CN;
				font-size: 40rpx;
				font-style: normal;
				font-weight: 700;
			}
			&:nth-of-type(3) &-content .title .lx text{
				color: #FFBA68;
			}
			&-index{
				width: 30rpx;
				color: #333;
				font-family: Source Han Sans CN;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 500;
			}
			&-content{
				margin-left: 26rpx;
				.title{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.name{
						color: #333;
						font-family: Source Han Sans CN;
						font-size: 28rpx;
						font-style: normal;
						font-weight: 500;
					}
					.lx{
						margin-left: 20rpx;
						color: #666;
						font-family: Source Han Sans CN;
						font-size: 26rpx;
						font-style: normal;
						font-weight: 400;
						text{
							color: #333333;
							font-weight: 500;
							margin-left: 10rpx;
						}
					}
				}
				.bottom{
					color: #999;
					font-family: Source Han Sans CN;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}
}

.search-popup{
	position: absolute;
	left: 30rpx;
	right: 30rpx;
	top: 120rpx;
	height: 580rpx;
	overflow-y: auto;
	padding: 20rpx 30rpx;
	z-index: 999;
	border-radius: 14rpx;
	background: #fff;
	box-shadow: 0 0rpx 12rpx #ddd;
	.item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #E4E4E4;
		&:last-child{
			border-bottom: none;
		}
		view{
			color: #333;
			font-family: Source Han Sans CN;
			font-size: 26rpx;
			font-style: normal;
			font-weight: 400;
		}
	}
}
.goods{
	background: #fff;
	border-radius: 14rpx;
	padding: 30rpx;
	.hot-title{
		display: flex;
		justify-content: flex-start;
		// align-items: center;
		.hot-title-left{
			width: auto;
			color: #333;
			font-family: Source Han Sans CN;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
		}
		.hot-title-right{
			.active{
				border-bottom: 5rpx solid #FF814B;
				color: #FF814B;
			}
		}
	}
	&-list{
		margin-top: 30rpx;
	}
}

</style>